<template>
	<view class="step-box" :class="{mini: mini}">
		<view class="item" @click="jump(1)" :class="{action: index==1,over:index>1}">
			<view class="icon">
				<icon v-if="index>1" type="success_no_circle" size="30" /><span v-else>1</span>
			</view>
			<view class="text">第一步</view>
		</view>
		<view class="line" :class="{action: index>=1}"></view>
		<view class="line" :class="{action: index>=2}"></view>
		<view class="item" @click="jump(2)" :class="{action: index==2,over:index>2}">
			<view class="icon">
				<icon v-if="index>2" type="success_no_circle" size="30" /><span v-else>2</span>
			</view>
			<view class="text">第二步</view>
		</view>
		<view class="line" :class="{action: index>=2}"></view>
		<view class="line" :class="{action: index>=3}"></view>
		<view class="item" :class="{action: index>=3}">
			<view class="icon">3</view>
			<view class="text">第三步</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "step",
		props: ['value','mini'],
		data() {
			return {
				index: 1
			};
		},

		watch: {
			value: {
				handler: function(value) {
					this.index = value
				},
				immediate: true
			}
		},
		methods: {
			jump(i) {
				if(i==3) return
				if (this.index > i) this.$emit('input', i)
			}
		}
	}
</script>

<style lang="scss">
	.step-box {
		padding-top: 10rpx;
		display: flex;
		width: 100%;
		justify-content: center;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 60rpx;

			.icon {
				border: 4rpx rgb(206, 210, 217) solid;
				border-radius: 50%;
				font-size: 28rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgb(206, 210, 217);

			}

			.text {
				font-size: 24rpx;
				width: 160rpx;
				text-align: center;
				color: rgb(206, 210, 217);
				margin-top: 10rpx;
			}

			&.action {
				.icon {
					color: #fff;
					background-color: rgb(13, 109, 214);
					border-width: 0;
				}

				.text {
					color: $uni-text-color;
				}

			}

			&.over {
				.icon {
					background-color: #fff;
					border: 4rpx rgb(13, 109, 214) solid;
				}

				.text {
					color: rgb(206, 210, 217);
				}
			}
		}

		.line {
			height: 4rpx;
			width: 14%;
			margin-top: 28rpx;
			background-color: rgb(206, 210, 217);

			&.action {
				background-color: rgb(13, 109, 214);
			}
		}
		&.mini{
			transform: scale(.8);
			transform-origin: 50% 50%;
			padding: 0 ;
			.line {
				width: 24%;
			}
		}
	}
</style>